<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文件上传</title>
</head>

<body>
    <canvas id="myCanvas" width="500" height="500"> </canvas>
    
    <script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    
    //绘制身体
    ctx.beginPath();
    ctx.arc(250, 250, 150, 0, 2 * Math.PI);
    ctx.fillStyle = "pink";
    ctx.fill();
    ctx.strokeStyle = "black";
    ctx.lineWidth = 5;
    ctx.stroke();
    
    //绘制头部
    ctx.beginPath();
    ctx.arc(250, 125, 75, 0, 2 * Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.stroke();
    
    //绘制眼睛
    ctx.beginPath();
    ctx.arc(200, 100, 20, 0, 2 * Math.PI);
    ctx.arc(300, 100, 20, 0, 2 * Math.PI);
    ctx.fillStyle = "black";
    ctx.fill();
    
    //绘制嘴巴
    ctx.beginPath();
    ctx.moveTo(200, 150);
    ctx.quadraticCurveTo(250, 175, 300, 150);
    ctx.strokeStyle = "red";
    ctx.lineWidth = 5;
    ctx.stroke();
    
    //绘制头发
    ctx.beginPath();
    ctx.moveTo(200, 50);
    ctx.lineTo(250, 50);
    ctx.lineTo(330, 50);
    ctx.lineTo(400, 50);
    ctx.strokeStyle = "black";
    ctx.lineWidth = 10;
    ctx.stroke();
    </script>
</body>

</html>